<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3D旋转木马</title>
		<link rel="stylesheet" type="text/css" href="css/3.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				font-size: 0;
			}
			
			html,boby{
				width: 100%;
				height: 100%;
				background: -webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
				background-color: black;
				overflow: hidden;
			}
			
			.wrapper{
				/*width: 100%;
				height: 100%;*/
				perspective: 800px;
			}
			.wrapper .box{
				width: 120px;
				height: 180px;
				margin: 200px auto;
				position: relative;
				transform-style: preserve-3d;
				transform: rotateX(-15deg) rotateY(0deg);
			}
			
			.wrapper .box img{
				position: absolute;
				width: 100%;
				height: 100%;
				transform: rotateX(-10deg) rotateY(0deg) translateZ(0);
				/*-webkit-box-reflect: below 5px -webkit-linear-grandent;*/
			}
			
		</style>
		
	</head>
	<body>
		<div class="wrapper">
			<div class="box">
				<img src="./img/3/1.png" alt="" />
				<img src="./img/3/2.png" alt="" />
				<img src="./img/3/3.png" alt="" />
				<img src="./img/3/4.png" alt="" />
				<img src="./img/3/5.png" alt="" />
				<img src="./img/3/6.png" alt="" />
				<img src="./img/3/7.png" alt="" />
				<img src="./img/3/8.png" alt="" />
				<img src="./img/3/9.png" alt="" />
				<img src="./img/3/10.png" alt="" />
				<img src="./img/3/11.png" alt="" />
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript" src="js/3.js"></script>
	</body>
</html>
